<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span>个人中心</span>
    </div>

    <div class="user-profile">
      <div class="box-center">
        <el-upload class="avatar-uploader" action="" :auto-upload="false" :show-file-list="false"
          :before-upload="beforeAvatarUpload" :on-change="handleChange">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="box-center">
        <div class="user-name text-center">{{ user.name }}</div>
        <div class="user-role text-center text-muted">{{orgName}}</div>
      </div>
    </div>

    <div class="user-bio">
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header">
        </div>
        <div class="user-bio-section-body">
          <div class="text-muted">
            <div class="text-muted-header">上次登录信息</div>
            <div class="text-muted-body">
              <div><span>登录时间</span><span>2022-08-18 15:50</span></div>
              <div><span>登录IP</span><span>192.168.1.227</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
  import {
    findByUsername,
    uploadImage,
    deleteImage
  } from '@/api/system/user'
  export default {
    components: {},
    props: {
      user: {
        type: Object,
        default: () => {
          return {
            id: '',
            username: '',
            name: '',
            email: '',
            avatar: '',
            role: ''
          }
        }
      }
    },
    data() {
      return {
        orgName: '',
        imageUrl: '',
      }
    },
    created() {
      this.getUser()
    },
    methods: {
      getUser() {
        findByUsername(this.user.username).then(res => {
          if (res.code == 200) {
            this.orgName = res.result.orgName
          }
        })
        this.imageUrl = this.getImages()
      },
      getImages() {
        return process.env.VUE_APP_BASE_API + '/sys/user/thumbnail/' + this.user.id
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleChange(file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw);
        uploadImage({
          file: file.raw,
          id: this.user.id
        }).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '上传成功！'
            })
          }
        })
      },
      deleteImage() {
        deleteImage(this.user.id).then(res => {
          if (res.code == 200) {
            this.imageUrl = ''
          }
        })
      }
    }
  }
</script>

<style scoped>
  /deep/ .el-card__header {
    border-bottom: 5px solid #0868c1;
    padding-left: 10px;
    height: 52px;
  }

  /deep/ .user-bio .user-bio-section .user-bio-section-header {
    border-bottom: 5px solid #0868c1 !important;
  }

  /deep/ .el-card__body {
    padding: 10px;
  }

  /deep/ .box-center {
    margin: 0 auto;
    display: table;
  }

  /deep/.text-muted {
    color: #303133;
  }

  /deep/.user-profile .user-name {
    font-weight: bold;
  }

  /deep/.user-profile .box-center {
    padding-top: 10px;
  }

  /deep/.user-profile .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  /deep/.user-profile .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  /deep/.user-profile .user-follow {
    padding-top: 20px;
  }


  /deep/.user-bio span {
    padding-left: 4px;
  }

  /deep/.user-bio-section .user-bio-section-header {
    border-bottom: 1px solid #dfe6ec;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-weight: bold;
  }

  /deep/.user-bio .user-bio-section {
    font-size: 14px;
    padding: 15px 0;
  }

  /deep/.user-bio {
    margin-top: 20px;
    color: #606266;
  }

  /deep/ .text-muted-header {
    height: 30px;
    font-weight: 900;
  }

  /deep/.text-muted-body div:not(:last-child) {
    border-bottom: 1px solid #d4d4d4;
  }

  /deep/.text-muted-body div {
    height: 30px;
    margin: 0 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /deep/.avatar-uploader .el-upload {
    width: 120px;
    height: 120px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /deep/.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  /deep/.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  /* 上传*/
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /deep/.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  /deep/.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
